<template>
    <div class="hello" id="app" >
        <!-- :style="ContainerStyle" -->
        <el-container>
            <el-header>
                <h1 style="line-height:66px;font-size:18px;background:#113556;color:#fff;font-weight:500;text-align:center;margin:0px">实训设施智能管控平台</h1>
                <div class="userbtn">
                    <div style="margin-top:-60px;margin-right:40px;color:#fff">
                        <span v-if="islogin==false"  @click="tologin"><el-icon style="position:fixed;top:20px;right:40px;font-size:18px"><UserFilled /></el-icon> 登录</span>
                        <el-dropdown  v-if="this.userInfo.userId" >
                            <span @click="showUserHome" style="color:#fff;position:fixed;top:20px;right:40px;font-size:18px">欢迎 {{this.userInfo.username}} 
                            <el-icon class="el-icon--right" style="position:relative;top:4px">
                                <arrow-down />
                            </el-icon>
                            </span>
                            <template #dropdown>
                            <el-dropdown-menu>
                                <!-- <el-dropdown-item @click="suggest">建议反馈</el-dropdown-item> -->
                                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <span style="color:#fff;position:fixed;top:20px;right:260px;">{{currentTime}}</span>
                    </div>
                </div>
            </el-header>
            <el-container>
            <el-container>
            <el-main >
                <!-- 页面内容 -->
                <div style="color:#fff">
                    <el-row>
                        <el-col :span="rowWidth">
                            <p style="text-align:left;text-indent:20px;font-size:16px;font-weight: 500;">训练计划</p>
                            <!-- <ul style="list-style-type: none;background:#cce6ff;padding:10px 20px;margin:10px;height:80vh;">
                                <li style="background:#fff;margin-top:10px" v-for="t in this.timeList">
                                    <el-button style="width:100%" type="primary" v-if="this.time == t" @click="changeTime(t)">{{t}}</el-button>
                                    <el-button style="width:100%" type="default" v-else @click="changeTime(t)">{{t}}</el-button>
                                </li>
                            </ul> -->
                            <el-tree
                                style="background:#cce6ff;padding:10px 20px;height:80vh;color:#000"
                                :data="timeList"
                                node-key="id"
                                :props="defaultProps"
                                check-on-click-node
                                @check="handleNodeClick"
                                check-strictly
                                default-expand-all
                                ref="tree"
                                :default-checked-keys="defaultCheckedKey"
                                :highlight-current="true"
                                show-checkbox
                            />
                            <!-- <el-tree
                                class="hascolor"
                                style="background:#cce6ff;padding:10px 20px;margin:10px;height:80vh;color:#000"
                                :data="this.timeList"
                                :props="defaultProps"
                                @check="handleNodeClick"
                                default-expand-all
                                show-checkbox
                                check-on-click-node
                                node-key="name"
                                :highlight-current="true"
                                check-strictly
                                ref="tree"
                            ></el-tree> -->
                        </el-col>
                        <el-col :span="24-rowWidth">
                            <p style="text-align:left;text-indent:20px;font-size:16px;">
                                <span class="Bold">科目名称:</span>
                                <el-select v-model="this.subject_id" placeholder="请选择" style="width:30%" @change="changeSubject">
                                    <el-option
                                    v-for="item in this.subjectList"
                                    :label="item.name"
                                    :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                                <span class="Bold" style="margin-left: 12px;">计划名称:</span>
                                <el-select v-model="this.taskId" placeholder="请选择" @change="changeTask" style="width:30%">
                                    <el-option
                                    v-for="item in this.taskList"
                                    :label="item.name"
                                    :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </p>
                            <el-row>
                                <el-col :span="rowWidth" v-for="item in this.jobList">
                                    <div style="margin-left:10%;margin-top:20px;height: 160px">
                                        <div style="background:#2a4c72;border-radius:6px;position:relative" >
                                            <p style="overflow:hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;height: 60px;font-size: 16px;padding:10px 30px 10px 10px;font-weight: 500;">{{item.job_name}}</p>
                                            <img @click="deleteItem(item)" src="../assets/images/close.png" alt="" style="width:20px;height:20px;position:absolute;right:10px;top:10px;cursor: pointer">
                                            <div style="display: flex;padding: 10px;justify-content: center" class="btns">
                                                <el-button type="default" style="" @click="zj(item)">自检</el-button>
                                                <el-button type="success" style="" @click="startJob(item)">开始</el-button>
                                                <el-button type="primary" @click="addStudentItem(item)">编辑</el-button>
                                                <!-- <el-button type="danger" @click="deleteItem(item)">删除</el-button> -->

                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="rowWidth">
                                    <div style="width:80%;height:160px;margin-left:10%;margin-top:20px;" @click="addTask">
                                        <div style="width:100%;height:120px;border-radius:6px;background:#2a4c72">
                                            <p style="font-size: 16px;text-align:center;padding:20px 0px 0px 10px">新建任务</p>
                                            <el-icon :size="40" style="posotion:relative;top:0px"><plus /></el-icon>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
                <el-dialog title="自检" v-model="zjloadingdialog" width="30%" center>
                    <p style="text-align:center">设备正在自检中... ...</p>
                    <template #footer>
                        <span class="dialog-footer">
                        <el-button type="primary" @click="zjloadingdialog = false">确 定</el-button>
                        </span>
                    </template>
                </el-dialog>
                <el-dialog title="自检" v-model="zjsuccessdialog" width="30%" center>
                  <el-button type="success" circle style="width:80px;height:80px;margin: 0 auto; display: block;">
                    <el-icon :size="60"><check /></el-icon>
                  </el-button>
                  <p style="text-align:center;margin: 20px 0; display: block">设备运转正常，可开始训练</p>
                  <template #footer>
                        <span class="dialog-footer">
                        <el-button type="primary" @click="zjsuccessdialog = false">确 定</el-button>
                        </span>
                  </template>
                </el-dialog>
                <el-dialog title="自检" v-model="zjerrordialog" width="30%" center>
                    <el-button type="danger" circle style="width:80px;height:80px;margin: 0 auto; display: block;">
                        <el-icon :size="60"><close-bold /></el-icon>
                    </el-button>
                    <p style="text-align:center;margin:20px 0;display: block">设备运转失败，请重新自检</p>
                    <template #footer>
                        <span class="dialog-footer">
                        <el-button type="primary" @click="zjerrordialog = false">确 定</el-button>
                        </span>
                    </template>
                </el-dialog>
                <div v-if="this.showStudentTable" class="addtc2">
                    <div style="width:100%;height:40px">
                        <span style="font-size: 14px;font-weight:500;display: inline-block;float:left;margin: 4px " >人员分配</span>
                        <i style="position:absolute;right:10px;top:10px;font-size:20px;color: #000" @click="this.showStudentTable = false;this.studentTable = []"><el-icon><close /></el-icon></i> 
                    </div>
                    <div class="people-search-box">
                            <div class="people-search">
                                <span class="cur-name">学员姓名：</span>
                                <el-input
                                    v-model="peopleSearchForm.condition"
                                    style="width: 240px"
                                    placeholder="请输入"
                                    clearable
                                />
                            </div>
                            <div class="people-search">
                                <span class="cur-name">所属单位：</span>
                                <el-input
                                    v-model="peopleSearchForm.unit"
                                    style="width: 240px"
                                    placeholder="请输入"
                                    clearable
                                />
                            </div>
                            <div class="people-search">
                                <el-button type="primary" @click="getStudentTable">查询</el-button>
                            </div>
                        </div>
                        <el-table ref="multipleTable" :data="studentTable" stripe border style="float:left;margin-top:6px;width:100%;height:400px" @select="handleSelectionChange3">
                            <el-table-column type="selection" width="55" />
                            <el-table-column prop="serial_num" label="序号" width="60"/>
                            <el-table-column prop="student_number" label="学员编号"/>
                            <el-table-column prop="name" label="姓名" />
                            <el-table-column prop="sex" label="性别" width="60"/>
                            <el-table-column prop="age" label="年龄" />
                            <el-table-column prop="account_number" label="账号" />
                            <!-- <el-table-column prop="phone_num" label="手机号" width="160"/> -->
                            <el-table-column prop="career" label="职业" />
                            <el-table-column prop="unit" label="所属单位" />
                            <!-- <el-table-column prop="create_time" label="创建时间" width="160"/> -->
                            <el-table-column prop="user_status" label="用户状态" />
                        </el-table>
                        <el-pagination
                            style="float:left;margin-top:10px;"
                            v-model:current-page="currentPage3"
                            :page-sizes="[10]"
                            small
                            :disabled="disabled"
                            layout="total, prev, pager, next, sizes, jumper"
                            :total="totalSize3"
                            :size="10"
                            @current-change="handleCurrentChange3"
                            background
                        />
                        <el-button type="primary" size="small" style="float:right;margin-left:20px;margin-top:10px" @click="this.showStudentTable = false;this.submitAddStudent()">确定</el-button>
                        <el-button type="default" size="small" style="float:right;margin-top:10px" @click="this.showStudentTable = false;this.studentTable = []">取消</el-button>
                </div>
                <div v-if="this.showAddTc" class="addtc">
                    <div style="width:100%;height:40px">
                        <span style="font-size: 14px;font-weight:500;display: inline-block;float:left;margin: 4px ">新增计划</span>
                        <i style="position:absolute;right:10px;top:10px;font-size:20px;color: #000" @click="closeAddTc"><el-icon><close /></el-icon></i> 
                        <el-form :model="formInfo" label-width="100px" :rules="baseRules" size="small" style="width:96%;float: left;margin-top:0px">
                            <el-form-item label="计划名称" prop="name" >
                                <el-input v-model="formInfo.name" placeholder="请输入" :disabled="this.taskId !== ''" />
                            </el-form-item>
                            <el-form-item label="计划编号" prop="plan_num" >
                                <el-input v-model="formInfo.plan_num" placeholder="请输入" :disabled="this.taskId !== ''" />
                            </el-form-item>
                            <el-form-item label="计划日期" prop="plan_date" >
                                <el-date-picker
                                    v-model="formInfo.plan_date"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="YYYY/MM/DD"
                                    value-format="YYYY/MM/DD"
                                    :disabled="this.taskId !== ''"
                                    >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="计划描述" prop="plan_describe" >
                                <el-input v-model="formInfo.plan_describe" :rows="2" type="textarea" placeholder="100字以内" :disabled="this.taskId !== ''" />
                            </el-form-item>
                            <el-form-item label="选择科目" prop="subject" style="width:100%" >
                                <el-select
                                    v-model="formInfo.subjects"
                                    placeholder="选择科目"
                                    style="width: 100%"
                                    :disabled="this.subject_id !== ''"
                                    @change="changeSelectSubjects"
                                    >
                                    <el-option-group
                                        v-for="group in this.subjectData"
                                        :key="group.subject"
                                        :label="group.subject"
                                        >
                                        <el-option
                                            v-for="item in group.missionList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id"
                                        >
                                        </el-option>
                                    </el-option-group>
                                </el-select>
                                <el-table ref="multipleTable" :data="missionData" stripe border style="float:left;margin-top:6px;width:100%;height:200px" @selection-change="handleSelectionChange4">
                                    <el-table-column type="selection" width="55" />
                                    <el-table-column prop="serial_num" label="序号" width="60"/>
                                    <el-table-column prop="name" label="训练任务"/>
                                    <el-table-column prop="studentNameList" label="学员" />
                                    <el-table-column fixed="right" label="操作" width="180">
                                        <template #default="scope">
                                            <el-button link type="primary" size="small" @click="addStudentItem(scope.row)">人员分配</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <!-- <el-pagination
                                    style="float:left;margin-top:10px;"
                                    v-model:current-page="currentPage4"
                                    :page-sizes="[10]"
                                    small
                                    :disabled="disabled"
                                    layout="total, prev, pager, next, sizes, jumper"
                                    :total="totalSize4"
                                    :size="10"
                                    @current-change="handleCurrentChange3"
                                    background
                                /> -->
                            </el-form-item>
                            <el-form-item label="指派教员" prop="assign_instructors" >
                                <el-button v-if="this.taskId == ''" type="primary" plain size="small" style="float: left;" @click="this.showAddUserTc = true;this.getTableUserData()">添加人员</el-button>
                                <span v-if="this.currentRow.name">&nbsp;&nbsp;教员姓名：{{this.currentRow.name}}</span>
                                <span v-else style="color: red">&nbsp;&nbsp;请指派教员</span>
                            </el-form-item>
                        </el-form>
                        <el-button type="primary" size="small" style="float: right;" @click="submitAdd">确定</el-button>
                        <el-button type="default" size="small" style="float: right;margin-right:10px" @click="closeAddTc">取消</el-button>
                    </div>
                    <div v-if="this.showAddUserTc" class="addtc2">
                    <div style="width:100%;height:40px">
                        <span style="font-size: 14px;font-weight:500;display: inline-block;float:left;margin: 4px " >添加人员</span>
                        <i style="position:absolute;right:10px;top:10px;font-size:20px;color: #000" @click="this.showAddUserTc = false"><el-icon><close /></el-icon></i> 
                        <el-table :data="tableUserData" stripe border highlight-current-row @current-change="handleSelectionChange2" >
                            <el-table-column prop="serial_num" label="序号" width="80"/>
                            <el-table-column prop="account_number" label="用户账号" />
                            <el-table-column prop="name" label="姓名" />
                            <el-table-column prop="sex" label="性别" width="80"/>
                            <el-table-column prop="role_permission" label="角色权限" width="160"/>
                            <el-table-column prop="user_status" label="用户状态" width="100" />
                        </el-table>
                        <el-pagination
                            style="float:left;margin-top:10px;"
                            v-model:current-page="currentPage2"
                            v-model:page-size="pageSize2"
                            small
                            :disabled="disabled"
                            layout="total, prev, pager, next, sizes, jumper"
                            :total="totalSize2"
                            :size="10"
                            @current-change="handleCurrentChange2"
                            background
                        />
                        <el-button type="primary" size="small" style="float:right;margin-left:20px;margin-top:10px" @click="this.showAddUserTc = false;">确定</el-button>
                        <el-button type="default" size="small" style="float:right;margin-top:10px" @click="this.showAddUserTc = false;">取消</el-button>
                    </div>
                </div>
                </div>
                <el-dialog title="开始" v-model="showWSMes" width="20%" center @close="closeWebsocket">
                    <p style="text-align:center">{{this.websocketMessage}}</p>
                    <template #footer>
                        <span class="dialog-footer">
                        <el-button type="primary" @click="closeWebsocket">关闭</el-button>
                        </span>
                    </template>
                </el-dialog>
            </el-main>
            </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { ElMessageBox } from 'element-plus'
import moment from 'moment'
import wx from 'weixin-js-sdk'
import { fa } from 'element-plus/es/locale'
let socket = null

export default {
    data(){
        return{
            islogin: false,
            username:'',
            identity: '',
            userInfo: {
                userId: 0,
                username: '',
                token: '',
                role: '',
            },
            taskList: [],
            showAddTc: false,
            currentTime: '',
            zjloadingdialog: false,
            zjsuccessdialog: false,
            zjerrordialog: false,
            timeList: [],
            subjectList: [],
            time: '',
            subject_id: '',
            jobList: [],
            showStudentTable: false,
            studentTable: [],
            currentPage2: 1,
            totalSize2: 0,
            currentPage3: 1,
            totalSize3: 0,
            formInfo: {
                name: '',
                plan_num: '',
                plan_date: [],
                plan_describe: '',
                missionData: [],
                subjects: '',
            },
            baseRules: {
                subject:[{ required: true,  message: '选择科目为必填项', trigger: 'blur' }]
            },
            currentRow:{
                name: '教官'
            },
            currentPage4: 1,
            pageSize4: 10,
            totalSize4: 0,
            subjectData: [],
            missionData: [],
            studentTable: [],
            studentList: [],
            plan: {},
            task: {},
            job: {},
            cArr: [],
            taskId: '',
            defaultProps: {
                children: 'child',
                label: 'name'
            },
            showAddUserTc: false,
            showWSMes: false,
            websocketMessage: '正在开始任务...',
            rowWidth: 4,
            peopleSearchForm: {
                condition: '',
                unit: ''
            }
        }
    },

    methods:{
        logout(){
            let self = this
            // 清除状态保持
            window.localStorage.clear()
            // 状态保持清除后刷新页面
            this.tologin()
        },
        tologin(){
            this.$router.push({name:'login'})
        },
        zj(item){
            // 调用自检接口
            this.zjloadingdialog = true
            let self = this
            this.axios.post('http://20.19.195.3:9004/h5/check',{
                userId: self.userInfo.userId,
                jobId: item.id
            }).then((res) => {
                console.log(res)
                if(res.data.data.status == 1){
                    this.zjloadingdialog = false
                    this.zjsuccessdialog = true
                    this.zjerrordialog = false
                }else if(res.data.data.status == 0){
                    this.zjloadingdialog = false
                    this.zjsuccessdialog = false
                    this.zjerrordialog = true
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        addTask(){
            let self = this
            this.showAddTc = 'add'
            this.$nextTick(function(){
                this.formInfo = this.task
                this.formInfo.subjects = this.task.subjectIdList
                this.getSubjectData()
                if(this.subject_id !== ''){
                    this.getmissionData()
                    let rows = []
                    setTimeout(() => {
                        self.task.missionIdList.forEach(item=>{
                            self.missionData.forEach(row=>{
                                if(item == row.id){
                                    rows.push(row)
                                }
                            })
                        })
                        self.toggleSelection(rows, true)
                    }, 500)
                    this.currentRow.name = this.task.founder
                    this.formInfo.plan_date = this.task.plan_date.split("-")
                }
                // console.log(this.formInfo.plan_date)
            })
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row)
                })
            } else {
                this.$refs.multipleTable.clearSelection()
            }
        },
        // handleNodeClick(v){
        //     console.log(v)
        //     let self = this
            
        // },
        handleNodeClick(data, node){
            let self = this
            console.log('data', data)
            if(this.currentNodeKey && this.$refs.tree){
                this.$refs.tree.setCheckedKeys([])
                this.$refs.tree.setCheckedNodes([data])
            }
            this.currentNodeKey = data
            this.time = data.name
            this.subject_id = ''
            this.taskId = ''
            this.task = {}
            this.currentRow.name = ''
            this.axios.post('http://20.19.195.3:9004/h5/getJobListByTime',{
                userId: self.userInfo.userId,
                time: self.time
            }).then((res) => {
                console.log(res)
                if(res.data.code == 200){
                    self.jobList = res.data.data
                }else{
                    ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                        confirmButtonText: '知道了',
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
            self.getSubjectList()
        },
        // 获取科目列表
        getSubjectData(){
            let self = this
            this.axios.post('http://20.19.195.3:9004/task/getSubject',{
                userId: self.userInfo.userId
            }).then((res) => {
                console.log(res)
                if(res.data.code == 200){
                    self.subjectData = res.data.data
                }else{
                    ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                        confirmButtonText: '知道了',
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        changeSelectSubjects(v){
            console.log(v, this.formInfo.subjects)
            this.task.subjectIdList = this.formInfo.subjects
            this.getmissionData()
        },
        // 获取任务列表
        getmissionData(){
            let self = this
            this.axios.post('http://20.19.195.3:9004/task/getMissionBySubject',{
                userId: self.userInfo.userId,
                subject_id: self.task.subjectIdList
            }).then((res) => {
                console.log(res)
                if(res.data.code == 200){
                    self.missionData = res.data.data
                }else{
                    ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                        confirmButtonText: '知道了',
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        handleSelectionChange4(v){
            this.formInfo.missionData = []
            let self = this
            v.forEach(item=>{
                self.formInfo.missionData.push(item.id)
            })
            console.log(self.formInfo.missionData)
        },
        getTimeList(){
            let self = this
            this.axios.post('http://20.19.195.3:9004/h5/getTimeList',{
                userId: self.userInfo.userId
            }).then((res) => {
                console.log(res)
                if(res.data.code === 200){
                    self.timeList = res.data.data
                }else{
                    ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                        confirmButtonText: '知道了',
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        changeTime(t){
            let self = this
            this.time = t
            this.getSubjectList()
            this.subject_id = ''
            setTimeout(() => {
                self.subject_id = self.subjectList[0].id
                self.getTaskList()
                // setTimeout(() => {
                //     self.task = self.taskList[0]
                //     self.taskId = self.taskList[0].id
                //     self.getJobList()
                // }, 1000);
            }, 1000);
        },
        changeSubject(v){
            console.log(v)
            this.getTaskList()
        },
        getSubjectList(){
            let self = this
            this.axios.post('http://20.19.195.3:9004/h5/getSubjectListByTime',{
                userId: self.userInfo.userId,
                time: self.time
            }).then((res) => {
                console.log(res)
                if(res.data.code === 200){
                    self.subjectList = res.data.data
                }else{
                    ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                        confirmButtonText: '知道了',
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        getTaskList(){
            let self = this
            this.taskId = ''
            this.axios.post('http://20.19.195.3:9004/h5/getTaskListByTime',{
                userId: self.userInfo.userId,
                time: self.time,
                subject_id: self.subject_id
            }).then((res) => {
                console.log(res)
                if(res.data.code === 200){
                    self.taskList = res.data.data
                    // self.task = self.taskList[0]
                    // self.taskId = self.taskList[0].id
                }else{
                    ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                        confirmButtonText: '知道了',
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        changeTask(v){
            let self = this
            console.log(v)
            this.taskList.forEach(t=>{
                if(t.id == v){
                    self.task = t
                }
            })
            console.log(this.task, this.taskId)
            this.getJobList()
        },
        getJobList(){
            let self = this
            this.axios.post('http://20.19.195.3:9004/h5/getJobListByTask',{
                userId: self.userInfo.userId,
                task_id: self.task.id
            }).then((res) => {
                console.log(res)
                if(res.data.code === 200){
                    self.jobList = res.data.data
                }else{
                    ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                        confirmButtonText: '知道了',
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        addStudentItem(row){
            let self = this
            console.log(row)
            this.showStudentTable = true
            this.job = row
            this.studentList = row.studentList
            this.getStudentTable()
            this.$nextTick(function(){
                setTimeout(() => {
                    this.studentList.forEach((item) => {
                        self.studentTable.forEach((s)=>{
                            if(s.id == item){
                                self.$refs.multipleTable.toggleRowSelection(s, true)
                            }
                        })
                    })
                }, 200)
            })
        },
        getStudentTable(){
            let self = this
            this.axios.post(`http://20.19.195.3:9004/user/student/query`,{
                userId: self.userInfo.userId,
                page: self.currentPage3-1,
                size: 10,
                condition: self.peopleSearchForm.condition,
                unit: self.peopleSearchForm.unit
            }).then((res) => {
                console.log(res)
                if(res.data.code === 200){
                    self.studentTable = res.data.data.list
                    self.totalSize3 = res.data.data.total
                }else{
                    ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                        confirmButtonText: '知道了',
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        submitAddStudent(){
            let self = this
            this.axios.post('http://20.19.195.3:9004/job/addStudent',{
                userId: self.userInfo.userId,
                jobId: self.job.id,
                studentList: self.studentList
            }).then((res) => {
                console.log(res)
                if(res.data.code === 200){
                    ElMessageBox.alert(`分配成功`, '消息', {
                        confirmButtonText: '知道了',
                    })
                    // self.getTableData()
                    self.getmissionData()
                    let rows = []
                    self.studentList = []
                    self.studentTable = []
                    self.currentPage3 = 1
                    self.getJobList()
                    setTimeout(() => {
                        self.task.missionIdList.forEach(item=>{
                            self.missionData.forEach(row=>{
                                if(item == row.id){
                                    rows.push(row)
                                }
                            })
                        })
                        self.toggleSelection(rows, true)
                    }, 500)
                }else{
                    ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                        confirmButtonText: '知道了',
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        handleCurrentChange3(val){
            let self = this
            this.selectedList = []
            this.getStudentTable()
            this.$nextTick(function(){
                setTimeout(() => {
                    // pArr当前页码原始
                    let pArr = []
                    self.studentList.forEach((item) => {
                        self.studentTable.forEach((s)=>{
                            if(s.id == item){
                                self.$refs.multipleTable.toggleRowSelection(s, true)
                                pArr.push(s.id)
                            }
                        })
                    })
                    self.cArr = self.studentList.filter(item => !pArr.includes(item))
                    console.log(self.cArr)
                }, 200)
            })
        },
        handleSelectionChange3(v){
            // sArr当前页码选中的id
            let sArr = []
            let self = this
            v.forEach(item=>{
                sArr.push(item.id)
            })
            console.log(sArr)
            // 分配人员原始和现在选中的合并去重
            this.studentList = Array.from(new Set([...sArr, ...self.cArr]))
            console.log(this.studentList,sArr,this.cArr )
        },
        closeAddTc(){
            this.showAddTc = false
            // this.formInfo = {
            //     plan_name: '',
            //     plan_num: '',
            //     plan_date: [],
            //     plan_describe: '',
            //     missionData: [],
            //     subjects: '',
            // }
        },
        submitAdd(){
            let self = this
            if(this.formInfo.subject == 0){
                ElMessageBox.alert(`⚠️ 请填写必填项！`, '消息', {
                    confirmButtonText: '知道了',
                })
            }else{
                let submit = [{
                    plan_name: this.formInfo.name,
                    plan_num: this.formInfo.plan_num,
                    plan_date: `${this.formInfo.plan_date[0]}-${this.formInfo.plan_date[1]}`,
                    plan_describe: this.formInfo.plan_describe,
                    founder: this.currentRow.name,
                    subjectIdList: this.formInfo.subjects,
                    missionIdList: this.formInfo.missionData
                }]
                console.log(submit)
                this.axios.post('http://20.19.195.3:9004/task/addTask',{
                    planList: submit,
                    userId: self.userInfo.userId
                }).then((res) => {
                    console.log(res)
                    if(res.data.code === 200){
                        if(self.taskId == ''){
                            self.axios.post('http://20.19.195.3:9004/h5/getJobListByTime',{
                                userId: self.userInfo.userId,
                                time: self.time
                            }).then((res) => {
                                console.log(res)
                                if(res.data.code == 200){
                                    self.jobList = res.data.data
                                    ElMessageBox.alert(`✅ 新增成功！`, '消息', {
                                        confirmButtonText: '知道了',
                                    })
                                }else{
                                    ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                                        confirmButtonText: '知道了',
                                    })
                                }
                            }).catch((err) => {
                                console.log(err)
                            })
                            self.getSubjectList()
                        }else{
                            self.getTaskList()
                            self.getJobList()
                        }
                        // self.getTaskList()
                        // setTimeout(() => {
                        //     self.task = self.taskList[0]
                        //     self.taskId = self.taskList[0].id
                        //     self.getJobList()
                        // }, 1000)
                        // self.getTableData()
                        self.showAddTc = false
                    }else{
                        ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                            confirmButtonText: '知道了',
                        })
                    }
                }).catch((err) => {
                    console.log(err)
                })
                // this.formInfo = {
                //     plan_name: '',
                //     plan_num: '',
                //     plan_date: [],
                //     plan_describe: '',
                //     missionData: [],
                //     subjects: '',
                // }
            }
        },
        deleteItem(item){
            let self = this
            this.axios.post('http://20.19.195.3:9004/h5//delJob',{
                userId: self.userInfo.userId,
                taskId: item.taskId,
                jobId: item.id
            }).then((res) => {
                console.log(res)
                if(res.data.code === 200){
                    ElMessageBox.alert('✅ 删除成功！', '消息', {
                        confirmButtonText: '知道了',
                    })
                    if(self.taskId == ''){
                        self.axios.post('http://20.19.195.3:9004/h5/getJobListByTime',{
                            userId: self.userInfo.userId,
                            time: self.time
                        }).then((res) => {
                            console.log(res)
                            if(res.data.code == 200){
                                self.jobList = res.data.data
                            }else{
                                ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                                    confirmButtonText: '知道了',
                                })
                            }
                        }).catch((err) => {
                            console.log(err)
                        })
                        self.getSubjectList()
                    }else{
                        self.getJobList()
                    }
                }else{
                    ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                        confirmButtonText: '知道了',
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        getTableUserData(){
            let self = this
            this.axios.post(`http://20.19.195.3:9004/user/query`,{
                userId: self.userInfo.userId,
                page: self.currentPage2-1,
                size: 10,
                condition: ''
            }).then((res) => {
                console.log(res)
                if(res.data.code === 200){
                    self.tableUserData = res.data.data.list
                    self.totalSize2 = res.data.data.total
                }else{
                    ElMessageBox.alert(`⚠️ ${res.data.message}`, '消息', {
                        confirmButtonText: '知道了',
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        handleSizeChange2(){
            this.getTableUserData()
        },
        handleCurrentChange2(val){
            console.log(val, this.currentPage2)
            this.getTableUserData()
        },
        handleSelectionChange2(val){
            this.currentRow = val
        },
        // 开始任务
        startJob(item){
            let self = this
            console.log(item)
            if(socket!==null){
                socket.close()
                self.websocketMessage = '正在开始任务...'
            }
            socket = new WebSocket(`ws://20.19.195.3:9004/websocket/job/start/${item.id}`)
            socket.onopen = function (event){
                console.log("socket建立链接")
                self.showWSMes = true
            }
            socket.onmessage = function(event){
                self.websocketMessage = event.data
            }
            socket.onclose=function(e){
                console.log(e)
                socket.close()
            }
        },
        closeWebsocket(){
            this.showWSMes = false
            if(socket!==null){
                socket.close()
                self.websocketMessage = '正在开始任务...'
            }
        }
    },
    mounted() {
      if(document.body.clientWidth < 1750) this.rowWidth = 6
        let self = this
        this.getTimeList()
        // setTimeout(() => {
        //     self.time = self.timeList[0]
        //     self.getSubjectList()
        //     setTimeout(() => {
        //         self.subject_id = self.subjectList[0].id
        //         self.getTaskList()
        //         setTimeout(() => {
        //             self.task = self.taskList[0]
        //             self.taskId = self.taskList[0].id
        //             self.getJobList()
        //         }, 1000);
        //     }, 1000);
        // }, 1000);
    },
    created(){
        this.userInfo = {
            token: window.localStorage.getItem('token'), 
            userId: Number(window.localStorage.getItem('userId')),
            username: window.localStorage.getItem('username'),
            role: window.localStorage.getItem('role'),
        }
        // this.initialPage()
        // 获取当前时间 格式 2023-02-02 星期五
        moment.locale('zh-cn');
        this.currentTime = moment(new Date()).format('YYYY-MM-DD dddd');

        if(this.userInfo.userId && this.userInfo.userId !== 0 ){
            this.islogin = true
        }else{
            this.islogin = false
            this.tologin()
        }
        let self = this
        this.axios.interceptors.request.use(
            (config) => {
                // 请求头携带localStorage里面的token
                config.headers.token = self.userInfo.token
                return config
            },
            function (err) {
                // 对请求错误做些什么
                console.log(err)
            }
        )
        // console.log(this.userInfo)
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

:deep(.el-tree>.el-tree-node> .el-tree-node__content) {
    font-size: 16px;
}

:deep(.btns .el-button span) {
  font-size: 16px;
}

#app{
    background: rgb(3, 34, 62);
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    /* transform:scale(0.4); */
}
.main{
    width: 100%;
    height: 100vh;
}
.userbtn{
    width: 800px;
    height: 80px;
    float: right;
    /* border: 1px solid #fff; */
    color: #000;
    font-size: 16px;
    text-align: right
}
.userbtn span{
    cursor: pointer;
}
.addtc{
    width: 600px;
    position: fixed;
    top: 260px;
    left: 50%;
    margin-left: -300px;
    background:#fff;
    z-index: 3;
    padding: 10px;
    border: 1px solid #ccc
}
.addtc2{
    width: 800px;
    position: fixed;
    top: 300px;
    left: 50%;
    margin-left: -400px;
    background:#fff;
    z-index: 10;
    padding: 10px;
    border: 1px solid #ccc
}

.people-search-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/deep/ .el-dialog__header.show-close{
  padding-right: 0 !important;
}
</style>
